<template>
	<view class="main">
		<view class="page-title">请您留言</view>
		<view class="kf-tip">当前客服不在线，如需帮助请留言</view>
		<view class="form">
			<view class="form-data">
				<uni-forms ref="form" :modelValue="formData" :rules="rules" label-position="top" label-width="20">
					<uni-forms-item label="电话" name="mobile" required>
						<uni-easyinput type="text"  v-model="formData.mobile" placeholder="请输入联系电话"/>
					</uni-forms-item>
					<uni-forms-item label="邮箱" name="email" required>
						<uni-easyinput type="text" v-model="formData.email" placeholder="请输入邮箱" />
					</uni-forms-item>
					<uni-forms-item label="留言" name="content" required>
						<uni-easyinput type="textarea" v-model="formData.content" placeholder="请输入内容" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="submit">
				<button class="btn" type="default" @click="submit">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					mobile: '',
					email: ''
				},
				rules: {
					mobile: {
						rules: [
							{required: true,errorMessage: '请输入联系电话'}
						]
					},
					email: {
						rules: [
							{required: true,errorMessage: '请输入邮箱'},
							{format: 'email',errorMessage: '请输入正确的邮箱地址'}
						]
					},
					content:{
						rules: [
							{required: true,errorMessage: '请输入留言内容'}
						]
					}
				}
			}
		},
		methods: {
			// 触发提交表单
			submit() {
				this.$refs.form.validate().then(res=>{
					console.log('表单数据信息：', res);
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			}
		},
		onLoad() {
			
		}
	}
</script>

<style lang="scss">
	.kf-tip{
		font-size: 30upx;
		height: 100upx;
		line-height: 100upx;
	}
	.form{
		width: 690upx;
		height: 860upx;
		background-color: $whiteColor;
		border-radius: 30upx;
		.submit{
			padding-left: 60upx;
			padding-right: 60upx;
			margin-top: 100upx;
			.btn{
				background-image: url(../../static/img/home/gg/btn.png);
				background-size: 100% 100%;
				color: $whiteColor;
				height: 100upx;
				line-height: 100upx;
				border-radius: 50upx;
			}
			
		}
	}
</style>
